import { Table } from 'antd';
import dayjs from 'dayjs';
import { isNumber } from 'lodash';
import { useState } from 'react';
import { FormattedMessage } from 'umi';
import FileModal from './FileModal';
type Props = {
  data: any;
};
const UserData: React.FC<Props> = ({ data }) => {
  const [visible, setVisible] = useState(false);

  const [record, setRecord] = useState<any>([]);

  const changeTime = (time: string | number, type = 'YYYY-MM-DD HH:mm') => {
    return time ? dayjs(time).format(type) : '';
  };

  const newData = data?.map((item: any) => {
    const { url, key } = item;
    return {
      ...item,
      profileUrls:
        key == 'insuranceProof'
          ? JSON.parse(url || '[]')
          : isNumber(url)
          ? url
          : url?.split(',').filter((item: any) => item),
    };
  });
  const columns: any = [
    // 资料名称
    {
      title: <FormattedMessage id="user.data_name" />,
      dataIndex: 'name',
      key: 'name',
    },
    // 资料上传时间
    {
      title: <FormattedMessage id="user.data_upload_time" />,
      dataIndex: 'entryTime',
      render: (_: any, record: any) => {
        const { entryTime } = record;
        return changeTime(entryTime);
      },
    },
    // 资料有效期
    {
      title: <FormattedMessage id="user.data_validity" />,
      dataIndex: 'expireTime',
      render: (_: any, record: any) => {
        const { expireTime } = record;
        return changeTime(expireTime);
      },
    },
    // 操作
    {
      title: <FormattedMessage id="user.data_operate" />,
      render: (_: any, record: any) => {
        // 月结账单认证
        return (
          <a
            onClick={() => {
              setVisible(true);
              setRecord(record);
            }}
          >
            <FormattedMessage id="user.check" />
          </a>
        );
      },
    },
  ];

  return (
    <div>
      <Table
        rowKey="id"
        className="img_table"
        dataSource={newData}
        bordered
        pagination={false}
        columns={columns}
      />
      <FileModal
        visible={visible}
        handleOk={() => {
          setVisible(false);
        }}
        data={record}
      />
    </div>
  );
};

export default UserData;
